<template>
  <el-form-item 
    :label="field.name"
    :prop="field.tag"
    class="form-field-item"
  >
    <!-- 文本框 -->
    <el-input
      v-if="`${field.showtype}` === '1'"
      :value="value"
      @input="updateValue"
      @blur="handleBlur"
      :disabled="field.isedit === 0"
      clearable
      :placeholder="field.description"
    ></el-input>
    
    <!-- 下拉框 -->
    <el-select
      v-else-if="`${field.showtype}` === '2' || `${field.showtype}` === '10'"
      :value="value"
      @input="updateValue"
      @change="handleChange"
      :disabled="field.isedit === 0"
      clearable
      :placeholder="field.description"
    >
      <el-option
        v-for="item in getOptions(field)"
        :key="item.value"
        :label="item.text"
        :value="item.value"
      ></el-option>
    </el-select>
    
      
    <!-- 日期时间选择器 -->
    <el-date-picker
      v-else-if="field.showtype === '4'"
      :value="value"
      @input="updateValue"
      type="datetime"
      format="yyyy-MM-dd HH:mm:ss"
      value-format="yyyy-MM-dd HH:mm:ss"
      @change="handleChange"
      :disabled="field.isedit === 0"
      :placeholder="field.description"
    ></el-date-picker>
    
    <!-- 日期选择器（年月日） -->
    <el-date-picker
      v-else-if="field.showtype === '56'"
      :value="value"
      @input="updateValue"
      type="date"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      @change="handleChange"
      :disabled="field.isedit === 0"
      :placeholder="field.description"
    ></el-date-picker>
    
    <!-- 日期选择器（年月） -->
    <el-date-picker
      v-else-if="field.showtype === '57'"
      :value="value"
      @input="updateValue"
      type="month"
      format="yyyy-MM"
      value-format="yyyy-MM"
      @change="handleChange"
      :disabled="field.isedit === 0"
      :placeholder="field.description"
    ></el-date-picker>
    
    <!-- 复选框 -->
    <el-checkbox
      v-else-if="field.showtype === '3'"
      :value="value"
      @input="updateValue"
      @change="handleChange"
      :disabled="field.isedit === 0"
    ></el-checkbox>
    
    <!-- 颜色选择器 -->
    <el-color-picker
      v-else-if="field.showtype === '5'"
      :value="value"
      @input="updateValue"
      @change="handleChange"
      :disabled="field.isedit === 0"
    ></el-color-picker>
    
    <!-- 默认显示文本 -->
    <span v-else>{{ value }}</span>
  </el-form-item>
</template>

<script>
export default {
  props: {
    field: {
      type: Object,
      required: true
    },
    value: {
      type: [String, Number, Boolean, Date],
      default: ''
    }
  },
  methods: {
    getOptions(field) {
      return (field.editor && field.editor.options && field.editor.options.data) || [];
    },
    updateValue(value) {
      this.$emit('input', value);
    },
    handleChange(value) {
      this.$emit('change', this.field);
    },
    handleBlur() {
      this.$emit('change', this.field);
    }
  }
};
</script>

<style>
.form-field-item ::v-deep .el-form-item__label {
  color: inherit !important;
}
</style>